<div style=" margin-bottom: 10px;"><img src="{$data->value?$data->value:'/static/admin/images/image.png'}" class="image"
     {$data->value?='style="border:0;"'} id="img{$data->name}"></div>
<input type="file" name="file{$data->name}" id="file{$data->name}" style="display:none;">
<input type="hidden" name="{$data->name}" value="{$data->value}" class="form-control">
<button type="button" class="btn btn-success" id="button{$data->name}"><i class="fa fa-image"></i> 选择图片</button>
<script>
    $(function () {
        $("#button{$data->name}").click(function () {
            $("#file{$data->name}").click();
        });
        $("#file{$data->name}").change(function () {
            if ($(this).val() == '') {
                return false;
            }
            var formData = new FormData();
            formData.append('file', $("input[name=file{$data->name}]")[0].files[0]);
            $.ajax({
                url: '{:path(\'admin/Upload/image\')}',
                type: 'post',
                data: formData,
                dataType: 'json',
                cache: false,
                processData: false,
                contentType: false,
                success: function (res) {
                    $("#img{$data->name}").attr("src", res.path).css("border", "0");
                    $("input[name={$data->name}]").val(res.path);
                },
                error: function (error) {
                    $("#file{$data->name}").val('');
                    message.error(JSON.parse(error.responseText).message);
                },
                beforeSend: function () {
                    $("body").append('<div class="loading-view sk-spinner sk-spinner-fading-circle"><div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div>');
                },
                complete: function () {
                    $(".loading-view").remove();
                }
            });
        });
    });
</script>